<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框自动显示placeholder</title>
    <style>
    </style>
</head>

<input id="inputEle" type="text" />
<button onclick="handleSearch()">搜索</button>

<body>
    <script>
        let tipsArr = [
            '品味端午 与时偕行',
            '河南已经被热红了',
            '高考完的学生挤爆理发店',
            '刘亦菲彭冠英2集亲了15次',
            '不接陌生电话但是要去微信搜',
        ]
        let inputEle = document.getElementById('inputEle')
        let index = -1

        autoPlay()

        function autoPlay() {
            setTimeout(autoWrite, 2000)
        }

        function autoWrite() {
            if (index === tipsArr.length - 1) index = -1
            index += 1
            let text = tipsArr[index]
            let textArr = [...text]
            console.log('textArr', textArr)
            let chunk = ''
            let id = setInterval(function () {
                if (textArr.length === 0) {
                    clearInterval(id)
                    autoPlay()
                    return false
                }
                chunk += textArr.shift()
                inputEle.placeholder = chunk
            }, 200)
        }

        function handleSearch() {
            console.log(tipsArr[index])
        }


    </script>
</body>

</html>